<template>
<div>
  <div class="head-title">绑定银行账户</div>
  <div class="container-deep">
    <div class="closeIcon" @click="goBack"><el-icon class="el-icon-close self-icon"></el-icon></div>
    <el-form
      label-position='right'
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="100px">
      <el-form-item prop='cardNumber' label="银行卡号:">
        <el-input v-model="dataForm.cardNumber"></el-input>
      </el-form-item>
      <el-form-item prop="cardOwner" label="持卡人:">
        <el-input v-model="dataForm.cardOwner"></el-input>
      </el-form-item>
      <el-form-item prop='openBank' label="开户银行:">
        <el-input v-model="dataForm.openBank"></el-input>
      </el-form-item>
      <el-form-item prop='bankCode' label="开户行号:">
        <el-input v-model="dataForm.bankCode"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dataFormSubmit">提交</el-button>
      </el-form-item>
    </el-form>
	</div>
</div>
</template>>

<script>
import { luhmCheck } from '@/utils/luhmCheck'
import { bankCardAttribution } from '@/utils/bankcard'

export default {
  data(){
    // var validateBankNumber = (rule, value, callback) => {
    //   console.log("running");
    //   if (!luhmCheck(this.dataForm.cardNumber)) {
    //     callback(new Error('卡号有误，请重新输入'));
    //   } else {
    //     callback();
    //   }
    // };


    var validateBankNumber = (rule, value, callback) => {
        //银行卡验证
      if(this.dataForm.cardNumber != ""){
        if(this.dataForm.cardNumber.length < 15 || this.dataForm.cardNumber.length > 20) {
          callback(new Error("银行卡号长度必须在16到19之间！"));
        }
        var num = /^\d*$/; //全数字
        if(!num.test(this.dataForm.cardNumber)) {
          callback(new Error("银行卡号必须全为数字！"))
        }
        //开头6位
        var strBin ="10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
        if(strBin.indexOf(this.dataForm.cardNumber.substring(0,2)) == -1) {
          callback(new Error(("银行卡号开头6位不符合规范！")))
          return false;
        }
        //Luhm校验（新） luhmCheck()是验证银行卡号码正误的
        if(!luhmCheck(this.dataForm.cardNumber)){
          callback(new Error("银行卡号码有误！"))
        }else{
        //这里是展示给用户看得银行卡开户名以及传递给表单隐藏域的bankCardAttribution()方法就是自动匹配开户银行的
        callback()
        console.log(bankCardAttribution(this.dataForm.cardNumber));
        this.dataForm.openBank = bankCardAttribution(this.dataForm.cardNumber).bankName;
        }
      }
    };

    return {
      dataForm:{
        cardNumber:'',
        cardOwner: '',
        openBank: '',
        bankCode: ''
      },
      dataRule:{
        cardNumber:[
          { required: true, message: '帐号不能为空', trigger: 'blur' },
          { validator:validateBankNumber ,trigger:'blur' }
        ],
        cardOwner: [
          { required: true, message: '持卡人不能为空', trigger: 'blur' }
        ],
        openBank: [
          { required: true, message: '开户行不能为空', trigger: 'blur' }
        ],
        bankCode: [
          { required: true, message: '开户行行号不能为空', trigger: 'blur' }
        ]
      }
    }
  },

  computed:{
  },

  components:{
  },

  methods:{
    dataFormSubmit () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/shop/shopDetail/updateInformation`),
            method: 'put' ,
            params: this.$http.adornParams({
              cardNumber: this.dataForm.cardNumber,
              cardOwner: this.dataForm.cardOwner,
              openBank: this.dataForm.openBank,
              bankCode: this.dataForm.bankCode
            })
          }).then(({ data }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
            })
            this.goBack()
          })
        }
      })
    },

    goBack(){
      console.log("running");
      history.go(-1)
    }

  },

  created(){
  }
}
</script>

<style scoped>
div{
  padding: 0;
  margin: 0;
}
.container-deep{
  width: 600px;
  margin: 0 auto;
  padding-top: 50px;
  /* position: relative; */
}
.head-title{
  font-size: 18px;
  font-weight: 550;
  margin: 20px 0 0 30px;
}
.head-title::before{
  content: '';
  border-left: 3px solid #0087EB;
  margin-right: 4px;
}
/* .closeIcon{
    width: 50%;
    margin-left: 25%;
    margin-top: 20px;
} */

.closeIcon{
  position: absolute;
  right: 30px;
  top: 30px;
  font-size: 30px;
  z-index: 1000;
}
.el-form-item{
  margin-bottom: 20px
}
.el-button{
  width: 50%;
  margin-left: 25%;
}
</style>
